Next.js 快速创建项目教程

#Next.js 开发介绍

使用 React 进行个人博客前端页面的开发，因为 Blog 的前台需要 SEO 操作，所以会选用Next.js框架来辅助开发。然后减少 CSS 和各种组件的重复开发，选用阿里的Ant Desgin来作为 UI 交互库。定下这两个目标后，就可以搭建开发环境了。

#用`create-next-app`快速创建项目

create-next-app就是Next.js的脚手架工具，有了它可以直接一句命令就建立好项目目录和基本结构，省去了我们很多的麻烦。如果你没有使用过create-next-app,可以先进行全局安装，安装命令如下.

1	$ npm install -g create-next-app

先创建一个总的目录，因为我们的项目会分为三个大模块，所以需要一个顶层目录。创建完成后，再进入目录。安装完成后，进入你要建立项目的位置，使用npx来进行安装。

1	$ npx create-next-app blog

输入后按回车，就会自动给我们进行安装项目需要的依赖，Next相关的命令也会添加好。完成后可以使用yarn dev来测试一下。

在浏览器中输入http://localhost:3000/,看到下面的内容，说明项目生产成功。

create-next-app

基本的前台项目结构就建立好了。

#建立博客首页

用create-next-app建立好后，主页是默认的，所以我们要删除一下默认的文件和代码。把首页改成下面的代码。

import React from 'react'
import Head from 'next/head'
const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
 </>
)
export default Home

这样基本的前台结构就算搭建完成了，但是我们还要使用Ant Desgin轮子来写我们的UI部分。

#让`Next`支持CSS文件

先用yarn命令来安装@zeit/next-css包，它的主要功能就是让Next.js可以加载CSS文件，有了这个包才可以进行配置。

1	yarn add @zeit/next-css

包下载完成后，在blog根目录下，新建一个next.config.js文件。这个就是Next.js的总配置文件。写入下面的代码:

const withCss = require('@zeit/next-css')

if(typeof require !== 'undefined'){
    require.extensions['.css']=file=>{}
}

module.exports = withCss({})

这样我们的Next.js就支持CSS文件了。

#按需加载`Ant Design`

接下来用yarn来安装antd，在命令行里输入：

1	yarn add antd

然后再安装一下babel-plugin-import，命令如下：

1	yarn add babel-plugin-import

安装完成后，在项目根目录建立.babelrc文件，然后写入如下配置文件。

{
    "presets":["next/babel"],  //Next.js的总配置文件，相当于继承了它本身的所有配置
    "plugins":[     //增加新的插件，这个插件就是让antd可以按需引入，包括CSS
        [
            "import",
            {
                "libraryName":"antd"
            }
        ]
    ]
}

在pages目录下，新建一个_app.js文件，然后把CSS进行全局引入.

import App from 'next/app'

import 'antd/dist/antd.css'

export default App

这样Ant Design就可以按需引入了。现在index.js加入一个按钮，看看是否可以正常使用,代码如下。如果能正常使用，我们的基本环境就已经建立完成了。

import React from 'react'
import Head from 'next/head'
import {Button} from 'antd'
const Home = () => (
  <>
    <Head>
      <title>Home</title>
    </Head>
    <div><Button>我是按钮</Button></div>
 </>
)

export default Home

#Next.js 开发介绍

#用create-next-app快速创建项目

#建立博客首页

#让Next支持CSS文件

#按需加载Ant Design

#用`create-next-app`快速创建项目

#让`Next`支持CSS文件

#按需加载`Ant Design`